<template>
	<view>
		<image class="bg pa" src="/pagesA/static/images/bg1.png" mode=""></image>
		<view class="main pa">
			<u-navbar title="" bgColor="#ffffff00" :fixed="false" :autoBack="false">
				<template v-slot:left>
					<view class="toptitle">商家中心</view>
				</template>
			</u-navbar>

			<view class="xp32 ">
				<view class="pr xflex-x xmb24">
					<img class="avatar xmr24" :src="info.data.image" alt="" />
					<view class="">
						<view class="">
							<view class="name">
								{{info.data.name}}

							</view>

							<view class="xflex-x xmt20 xai">
								<image class="addiconb" src="/pagesA/static/images/dingwei.png" mode=""></image>
								<view class="addname">
									{{info.data.address}}
								</view>
							</view>




						</view>

					</view>
					
					<view class="pa gr1 xflex-x-center" @click="toPage('/pagesA/page/recordList/recordList')">
						
						<view class="gr-user">
							申请记录
						</view>
					</view>
					
					<view class="pa gr xflex-x-center" @click="toPage('/pages/mine/mine')">
						<image class="gr-img" src="/pagesA/static/images/user.png" mode=""></image>

						<view class="gr-user">
							切换个人
						</view>
					</view>


				</view>


				<view class="jd xmr24">
					<view class="jd-top xflex-x-between">
						<view class=" xflex-x">
							<image class="jd-avatar" :src="info.data.default.image" mode=""></image>
							<view class="">
								<view class="xflex-x">
									<view class="jd-jdnz">
										{{hotel.length == 0 ?'请先添加酒店':info.data.default.name}}
									</view>
									<image @click="show = true" class="jd-jdnzt" src="/pagesA/static/images/gd.png"
										mode=""></image>
								</view>

								<view class="xflex-x">
									<image v-if="hotel.length != 0" class="jd-dztp" src="/pagesA/static/images/dingwei.png" mode=""></image>
									<view class="jd-dzmz clamp">
										{{hotel.length == 0 ?'':info.data.default.address}}
									</view>
								</view>
							</view>
						</view>
						<view class="jd-tj xflex-x-center" @click="toPage('/pagesA/page/steps/steps')">
							<image class="jd-tjtp" src="/pagesA/static/images/add.png" mode=""></image>
							<view class="jd-tjnz">
								添加酒店
							</view>
						</view>
					</view>
					<view class="jds" v-if="hotel.length > 0">
						<view class="jdsItem xflex-y-center" @click="toPage('/pagesA/page/modify/modify?id='+info.data.default.id)">
							<image class="jdsIcon" src="/pagesA/static/images/jd.png" mode=""></image>
							<view class="jdsText">
								酒店设置
							</view>
						</view>
						<view class="jdsItem xflex-y-center" @click="toPage('/pagesA/page/addroom/addroom')">
							<image class="jdsIcon" src="/pagesA/static/images/fx.png" mode=""></image>
							<view class="jdsText">
								添加房型
							</view>
						</view>
						<view class="jdsItem xflex-y-center" @click="toPage('/pagesA/page/stock/stock')">
							<image class="jdsIcon" src="/pagesA/static/images/kc.png" mode=""></image>
							<view class="jdsText">
								库存管理
							</view>
						</view>
						<!-- <view class="jdsItem xflex-y-center" @click="toPage('/pagesA/page/conditions/condition')">
							<image class="jdsIcon" src="/pagesA/static/images/tj.png" mode=""></image>
							<view class="jdsText">
								条件设置
							</view>
						</view> -->
					</view>



				</view>


				<view class="ye xmt24">
					<view class="" @click="toPage('/pagesA/page/balance/balance')">
						<view class="yeTitle">
							账户余额(元）
						</view>
						<view class="yeValue xflex-x">
							<view class="">
								{{info.data.fund.money}}
							</view>
							<image class="yejt xml32" src="/pagesA/static/images/jt.png" mode=""></image>
						</view>
					</view>


					<view class="xflex-x">
						<view class="xflex1">
							<view class="yeTitle">
								今日收益(元）
							</view>
							<view class="yeValue xflex-x">
								<view class="">
									{{info.data.fund.today_profit}}
								</view>
							</view>
						</view>

						<view class="xflex1">
							<view class="yeTitle xflex-x">
								<view class="">
									今日订单
								</view>
								
							</view>
							<view class="yeValue xflex-x">
								<view class="">
									{{info.data.fund.today_order}}
								</view>

							</view>
						</view>
					</view>


					<view class="xmt60 xflex-x">
						<view class="xflex1">
							<view class="syv">
								累计收益<text>{{info.data.fund.total_profit}}</text>
							</view>
							<view class="syv">
								总营业额<text>{{info.data.fund.total_trade}}</text>
							</view>
						</view>
						<view class="xflex1">
							<view class="syv">
								昨日订单<text>{{info.data.fund.yesterday_order}}</text>
							</view>
							<view class="syv">
								累计订单<text>{{info.data.fund.total_order}}</text>
							</view>
						</view>
					</view>


				</view>



				<view class="utils xmt24">
					<view class="utilTitle">
						通用工具
					</view>

					<view class="utilBox">
						<view class="utilItem xflex-y-center" @click="toPage('/pagesA/page/bankCard/bankCard')">
							<image class="utilIcon" src="/pagesA/static/images/yh.png" mode=""></image>
							<view class="utilName">
								绑定银行卡
							</view>
						</view>

						<view class="utilItem xflex-y-center" @click="toPage('/pagesA/page/support/support')">
							<image class="utilIcon" src="/pagesA/static/images/bz.png" mode=""></image>
							<view class="utilName">
								帮助支持
							</view>
						</view>

						<button class="xbutton" open-type="contact">
							<view class="utilItem xflex-y-center">
								<image class="utilIcon" src="/pagesA/static/images/kf.png" mode=""></image>
								<view class="utilName">
									联系客服
								</view>
							</view>
						</button>
					</view>
				</view>





			</view>
		</view>


		<u-popup :show="show" @close="close" @open="open">
			<view class="popup">
				<view class="xflex-x-between">
					<view class="popup-title">
						切换酒店
					</view>
					<image class="popup-gb" @click="show = false" src="/pagesA/static/images/guanbi1.png" mode=""></image>
				</view>

				<scroll-view scroll-y="true" style="height: 900rpx;">
					<view class="shop pr xflex-x xmt24" :class="item.default == 1 ?'shoactive':''"  v-for="(item,index) in hotel" @click="getwitch(item)" :key="index">
						<image class="shop-img" :src="item.image" mode=""></image>
						<view class="shop-on pa" v-if="item.default == 1">
							当前选择
						</view>
						<view class="shop-info xai xflex-y-between">
							<view class="shop-name clamp">
								{{item.name}}
							</view>
							<view class="xflex-x">
								<image class="shop-icon" src="/pagesA/static/images/dingwei.png" mode=""></image>
								<view class="shop-address clamp">
									{{item.address}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- <view class="shop xflex-x xmt24">
					<image class="shop-img" src="" mode=""></image>
					<view class="shop-info xai xflex-y-between">
						<view class="shop-name">
							威尼斯酒店
						</view>
						<view class="xflex-x">
							<image class="shop-icon" src="/pagesA/static/images/dingwei.png" mode=""></image>
							<view class="shop-address">
								北京市朝阳区康凯大道...
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</u-popup>

		<tabbars :list="tabs.list" :value="2" :isToPage='info.data.default.length == 0'/>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from 'vue';
	
	import {onShow} from '@dcloudio/uni-app'
	import tabbars from "/components/tabbar/tabbar.vue"

	import {
		partnerinfo,
		hotellists,
		hotelswitch
	} from '/network/home.js'


	let info = reactive({
		data: {
			address: "",
			bank: [],
			default: [],
			fund: {
				money: "0.00",
				today_order: 0,
				today_profit: 0,
				total_order: 0,
				total_profit: 0,
				total_trade: 0,
				yesterday_order: 0,
			},
			id: 2,
			image: "",
			name: ""
		}
	})
	// 获取个人信息
	const getpartnerinfo = ()=>{
		partnerinfo().then(res => {
		
			info.data = res.data
			tabs.list[0].badge = res.data.default.wait_checkin
			tabs.list[1].badge = res.data.default.wait_rob
			
		})
	}
	
	onShow(()=>{
		getpartnerinfo()
	})
	
	
	let hotel = ref([])
	const gethotel = () =>{
		hotellists().then(res=>{
			hotel.value = res.data.lists
		})
	}
	gethotel()
	// 切换
	const getwitch = (data) =>{
		hotelswitch({id:data.id}).then(res=>{
			uni.showToast({
				icon:"none",
				title:'切换成功'
			})
			show.value = false
			gethotel()
			
			partnerinfo().then(res => {
				console.log(res);
			
				info.data = res.data
			})
			
			getpartnerinfo()
		})
	}

	let tabs = reactive({
		list: [{
				type: 'solt',
				selected: '/pagesA/static/images/tab/2.png',
				unselected: '/pagesA/static/images/tab/1.png',
				text: '订单',
				path: '/pagesA/page/home/home',
				badge:0
				
			},
			{
				type: 'zhong',
				selected: '/pagesA/static/images/tab/4.pngg',
				unselected: '/pagesA/static/images/tab/3.png',
				path: '/pagesA/page/lobby/lobby'
			},
			{
				type: 'solt',
				selected: '/pagesA/static/images/tab/6.png',
				unselected: '/pagesA/static/images/tab/5.png',
				text: '我的',
				path: '/pagesA/page/mine/mine',
				badge:0
			}
		]
	})

	let show = ref(false)


	const toPage = (url) => {
		// if (!token) {
		// 	uni.navigateTo({
		// 		url: "/pages/index/login"
		// 	})
		// }
		
		// if(hotel.value.length  == 0) {
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '你还未添加酒店',
		// 		confirmText:'去添加',
		// 		success: function (res) {
		// 			if (res.confirm) {
		// 				console.log('用户点击确定');
		// 			} else if (res.cancel) {
		// 				console.log('用户点击取消');
		// 			}
		// 		}
		// 	});
		// 	return
		// }
		
		
		uni.navigateTo({
			url: url
		})
	}


	let order = reactive({
		list: [{
				name: '待发布',
				icon: '/static/image/mine/o1.png',
				path: '/pages/mine/order/myOrder',
				incon: 'wait'

			},
			{
				name: '已发布',
				icon: '/static/image/mine/o2.png',
				path: '/pages/mine/order/myOrder',
				incon: 'publish'
			},
			{
				name: '待入住',
				icon: '/static/image/mine/o3.png',
				path: '/pages/mine/order/myOrder',
				incon: 'in'
			},
			{
				name: '待评价',
				icon: '/static/image/mine/o4.png',
				path: '/pages/mine/order/myOrder',
				incon: 'comment'
			},
			{
				name: '已完成',
				icon: '/static/image/mine/o5.png',
				path: '/pages/mine/order/myOrder',
				incon: 'complete'
			}
		]
	})



	setTimeout(() => {
		console.log(tabs.list);
	}, 2000)
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 746rpx;
		top: 0;
		z-index: 0;
		// background-color: rgb(219,217,223);
	}

	.toptitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #222222;
	}

	.main {
		z-index: 1;
		// background-color: rgb(219, 217, 223);
		width: 100%;
	}

	.avatar {
		width: 133rpx;
		height: 133rpx;
		border-radius: 50%;
		background-color: #333;
	}

	.name {
		font-size: 44rpx;
		color: #111111;
	}

	.vip {
		width: 690rpx;
		margin-top: 40rpx;
	}

	.vipbg {
		width: 100%;
		height: 188rpx;
		z-index: 0;
	}

	.vipbox {
		z-index: 1;
		padding: 21rpx 23rpx;
		box-sizing: border-box;

		&-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #532A00;

		}

		&-tips {
			font-weight: 500;
			font-size: 24rpx;
			color: #532A00;
		}

		&-pillar {
			width: 1rpx;
			height: 26rpx;
			background: #532A00;
		}

		&-icon {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.addiconb {
		width: 24rpx;
		height: 24rpx;
		margin-top: 5rpx;
	}

	.addname {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		width: 300rpx;
		
	}

	.vipicon {
		width: 70rpx;
		height: 70rpx;
	}

	.vipboxs {
		width: 690rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		width: 100%;
		top: 50px;

		&-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}

		&-next {
			width: 24rpx;
			height: 24rpx;
		}

		&-all {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			margin-right: 3rpx;
		}
	}

.gr1 {
		width: 190rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 28rpx 0rpx 0rpx 28rpx;
		border: 1px solid #F8F8F8;
		right: -32rpx;
		bottom: 88rpx;

		&-img {
			width: 28rpx;
			height: 28rpx;
		}

		&-user {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.gr {
		width: 190rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 28rpx 0rpx 0rpx 28rpx;
		border: 1px solid #F8F8F8;
		right: -32rpx;
		bottom: 0;

		&-img {
			width: 28rpx;
			height: 28rpx;
		}

		&-user {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.jd {
		width: 690rpx;
		// height: 310rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;

		&-avatar {
			width: 70rpx;
			height: 70rpx;
			background-color: #004098;
			border-radius: 50%;
			margin-right: 12rpx;
		}

		&-jdnz {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			margin-right: 15rpx;
		}

		&-jdnzt {
			width: 30rpx;
			height: 30rpx;
		}

		&-dztp {
			width: 24rpx;
			height: 24rpx;
		}

		&-dzmz {
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			width: 360rpx;
		}

		&-tjtp {
			width: 24rpx;
			height: 24rpx;
		}

		&-tj {
			width: 160rpx;
			height: 44rpx;
			background: #F2FAFF;
			border-radius: 22rpx;
			border: 1px solid #0CB0FD;
		}

		&-tjnz {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #0CB0FD;
		}

		&-top {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}

	.jds {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.jdsIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.jdsText {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		margin-top: 10rpx;

	}

	.ye {
		padding: 30rpx 37rpx;
		width: 690rpx;
		// height: 390rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.yeTitle {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.yeValue {
		font-family: DIN;
		font-weight: bold;
		font-size: 44rpx;
		color: #333333;
	}

	.yejt {
		width: 24rpx;
		height: 24rpx;

	}

	.syv {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 48rpx;

		&>text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin-left: 9rpx;
		}
	}

	.utilTitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		margin-bottom: 45rpx;
	}

	.utils {
		width: 690rpx;
		height: 245rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.utilIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.utilName {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #222222;
		margin-top: 21rpx;
	}

	.utilBox {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.order {

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;


		&-item {}

		&-icon {
			width: 60rpx;
			height: 60rpx;
		}

		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;

		}

		&-num {
			width: 24rpx;
			height: 24rpx;
			background: #F02020;
			border-radius: 50%;
			font-weight: bold;
			font-size: 18rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 24rpx;
			top: -12rpx;
			right: 0;
		}

	}

	.util {
		width: 690rpx;
		height: 405rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 100px;


		&-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 0 60rpx;
		}

		&-item {
			margin-top: 48rpx;
		}

		&-img {
			width: 56rpx;
			height: 56rpx;
		}

		&-text {
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			margin-top: 20rpx;
		}
	}

	.shop {
		width: 100%;
		height: 140rpx;

		&-bg {
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		&-title {
			padding: 29rpx;
			box-sizing: border-box;
			z-index: 4;
			width: 100%;

		}

		&-next {
			width: 28rpx;
			height: 28rpx;
		}

		&-titles {
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-size: 32rpx;
			color: #004098;
			line-height: 40rpx;
			background: linear-gradient(0deg, #0DBFFB 0%, #198EFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-right: 10px;
		}

		&-tips {

			font-weight: 400;
			font-size: 20rpx;
			color: #777777;
			margin-top: 14rpx;
		}
	}


	.vips {
		// width: 180rpx;
		// width: 200rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(204, 204, 204, 0.57);
		border-radius: 20rpx;
		margin-top: 21rpx;
		float: left;
	}

	.vipsicon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.vipsname {

		height: 36rpx;
		// line-height: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #D2A528;
		line-height: 46rpx;
		padding-right: 17rpx;
		padding-bottom: 6px;
	}

	.popup {
		width: 750rpx;
		height: 1200rpx;
		background: #F5F5F5;
		padding: 30rpx;
		box-sizing: border-box;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 44rpx;
			color: #111111;
		}

		&-gb {
			width: 32rpx;
			height: 32rpx;
		}

		.shop {
			width: 690rpx;
			height: 158rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			&-img {
				width: 97rpx;
				height: 97rpx;
				border-radius: 50%;
				background-color: #EEEEEE;
				margin-right: 15rpx;
			}

			&-info {
				height: 100%;
			}

			&-icon {
				width: 30rpx;
				height: 30rpx;
			}

			&-name {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #111111;
				width: 300rpx;
			}

			&-address {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				width: 300rpx;
			}

			&-on {
				width: 130rpx;
				height: 44rpx;
				background: #F2FAFF;
				border-radius: 10rpx;
				border: 1px solid #0CB0FD;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #0CB0FD;
				text-align: center;
				line-height: 44rpx;
				top: 20rpx;
				right: 20rpx;
			}
		}
	}

	.shoactive {
		background: #E4F5FD !important;
	}
</style>